有效圖表設計Charts（指南）
圖表是增強應用參與度和資訊傳遞的強大工具。它們能夠幫助使用者做出決策和設定目標。在設計圖表時，需明確圖表在應用中的作用，從而確定何時使用圖表、如何使用圖表以及設計統一的圖表系統。
明確目標
確定圖表要傳達的關鍵資訊。為舊金山和庫比蒂諾銷售國際煎餅app設計過去30天的煎餅銷售情況。
需求聚焦
瞭解最近的銷售模式可能是有用的，這樣他們可以瞭解銷售的波動情況及其範圍，從而瞭解這些波動有多大。確定具體數值有助於分析特定日期的銷售情況。
其他有用的資訊可能包括最大銷售量、異常天數，或不同星期幾或地點之間的比較。
如果這樣想會有很多方向，哪這些方向中哪一個對餐車老闆最重要呢？
經過溝通明確餐車經營者主要想了解他們的銷售情況在不同時間和特定日子的表現。
那就意味著我們需要專注於傳達銷售模式、範圍和具體數值。
我們是如何根據這三個優先事項設計出這個圖表的？讓我們一步步走過設計過程。
設計過程
1 Marks 標記，它們是圖表的視覺構建塊，比如柱狀圖中的柱條。
2 Axes 座標軸，為這些標記提供框架。
3 Descriptions 描述，使圖表更易理解和解讀。
4 Interaction 互動，使使用者能夠深入探索資料，對於無障礙設計至關重要。
5 color 顏色，增加個性，並且，正如我們將在第二張圖表中展示的那樣，也可以增強清晰度。
Marks 標記
標記是柱狀圖中的柱條、折線圖中的線條、散點圖中的點。每一種標記都有豐富的方式來表達資料。
比如柱條排列表示資料隨時間的變化。它們堆疊起來顯示比例，或者你可以將它們並排放置來比較不同類別之間的數值。
哪些選項適合我們的圖表呢？你需要根據你的目標和資料進行設計。
回到目標圖表應關注過去30天的煎餅銷售情況的三個方面：模式、範圍和具體數值。我們需要透過Marks 標記看清楚銷售模式。
對於我們的餐車經營者來說，瞭解銷售中的波動或軌跡是有用的。以時間為橫軸，煎餅銷售量為縱軸開始設計。
使用點來表示每天的煎餅銷售量，當我們設想圖表中資料平滑時，點看起來很不錯！真實資料很少如此整齊。在真實資料中，我們可以看到使用點標記很難看出任何模式。
經驗：儘早用真實資料測試你的設計非常重要。
用線條標記連線每日的銷售數量。線條非常適合表示變化率。但是，如果我們的餐車在一個月內需要間隔關閉五天。在這種情況下，銷售模式變得不那麼清晰了，因為連線相距較遠數值的段落比數值本身更突出。
經驗：記得為資料中的各種情況設計
柱狀標記是我們圖表的一個更靈活的選擇。零值是可見的，但不會對其他資料造成干擾。空白部分越多，銷售量越高。銷售是累積的，所有柱條的視覺重量直接對應於過去30天的銷售數量。
答案：柱狀圖能清晰展示煎餅銷售模式的標記。
現在我們的餐車老闆可以看到最近的銷售波動情況。但是這些波動的範圍和特定日子的數值如何呢？
Axes 座標軸
座標軸框定標記，為它們的數值提供參考。
橫軸：標註開始和結束日期時，很明顯我們的圖表顯示的是5月8日至6月6日的30天。
縱軸：數值完全取決於餐車的銷售情況。考慮範圍是很重要的。範圍可以是固定的，也可以是動態的。
固定範圍：設定應用中的電池圖表。電池電量總是從0%到100%。將縱軸固定在這個範圍內有助於我們一眼看出電池是滿的、空的，還是介於兩者之間。
動態範圍：以健康應用中的步數圖表為例，沒有固定的最大步數，所以動態調整縱軸範圍以適應資料是合理的。即使步數很少，柱條也能充分利用可用的垂直空間，使波動更容易看出。
和步數一樣，餐車的煎餅銷售數量沒有限制。所以我們使用動態範圍來自動調整縱軸的上限以適應我們的資料。下限固定為0，一個柱條的高度是另一個的兩倍，銷售量也就是另一個的兩倍。雖然每個座標軸的上下限標籤很有幫助，但我們仍然需要更多結構來解釋圖表中間的銷售資料。
明確和調整座標軸的網格線
座標軸網格線和標籤的密度。網格線越多，估計這些數值就越容易。
有些圖表根本不需要網格線和標籤，例如健康應用中的趨勢圖。這些圖表往往是另一檢視中更大圖表的預覽，因此只需要瞭解資料模式即可。
我們有兩條水平網格線：一條在零，一條大致在當月的最大銷售量，這對於估計圖表中間的銷售範圍來說太少了
太多的網格線和標籤會讓人分心。有七條水平網格線可能會讓人感到過多。平衡這些因素以選擇適當的密度。
使用大約四條水平網格線更有效，並隨著軸範圍的變化進行調整。20的倍數。
以七天為步長讀取時間對人們來說是直觀的，這為30天的時間段提供了五條網格線。
我們透過考慮座標軸的範圍並調整網格線和標籤的密度來設計座標軸。
我們怎樣才能以快速直觀的方式傳達標記和座標軸背後的意義呢？
descriptions.描述
描述對於框定圖表的意圖並使其易於理解和訪問非常重要。使用描述或圖表前的文字來提供背景資訊，使圖表更易理解。
當我們在應用程式的使用者介面中檢視這個圖表時，螢幕的標題“總銷售量”已經提供了一些背景資訊。
而分段控制上的標籤“30天”迅速確定了我們的時間範圍。
但我們還需要澄清的是縱軸顯示的內容。因為這些數字不被使用者理解。比如是看銷售額嗎？還是煎餅的數量？
我們可以在縱軸上方寫上“煎餅銷量”但在這裡，它很小而且偏在一邊。)
我們希望圖表的意義是顯而易見的。透過使用“煎餅銷量”作為圖表的標題，圖表的意義變得顯而易見。提供這種背景資訊對於框定圖表非常重要。
透過重寫圖表標題為“總銷售量：1,234個煎餅”，我們可以突出圖表的主要結論。這個描述為我們的圖表提供了一個具體的數值，並總結了最關鍵的資訊。
經驗：提供描述性文字以提供資料的背景資訊並總結關鍵結論，可以使讀者更容易理解圖表。這使得圖表對所有人來說都更容易理解。
Interaction 互動
設計互動功能，使人們能夠在更深層次上探索和理解他們的資料。
你可以使用互動功能突出圖表的某些部分，以探索它們的資料如何在更廣泛的背景下適用，或在天、周、月和年之間切換。
對於餐車經營者來說，瞭解特定某天的確切銷售量是很有用的。我們可以透過互動式工具提示提供這個功能，這樣我們就可以觸控圖表來突出顯示並讀取這些具體的數值。
為了使觸控互動更易用，請使用較大的觸控目標區域。將目標區域擴充套件到圖表的全高度，允許觸控包括柱條上方的空白區域，以便輕鬆使用工具提示。（黃色代表可觸控範圍）
Color顏色搭配
顏色可以增加圖表的個性並增強清晰度。也可以傳達更多資訊。
讓我們使用一個在應用程式中跟蹤兩輛餐車的場景：一輛在舊金山，另一輛在庫比蒂諾。修改我們的總銷售圖表，以便我們可以比較這兩個地點的銷售情況。
我們可以用一條線來表示每個城市的銷售情況，但我們無法分辨哪條線屬於哪個城市。
我們用圓圈表示舊金山，用方塊表示庫比蒂諾。新增顏色來增強這種差異。
當顏色需要匹配App的品牌色的同時也要注意視覺平衡的重量問題。
比如我們用深紫色表示舊金山，用亮粉色表示庫比蒂諾。庫比蒂諾的粉色比舊金山的紫色更顯眼，使得庫比蒂諾看起來更重要。我們可以透過均衡飽和度和亮度來解決這個問題。
選擇不同顏色提高無障礙性和可讀性很重要。用紫色和綠色代替相似顏色表示舊金山和庫比蒂諾。確保顏色高對比，使圖表更友好。使用色盲過濾器檢查選擇。
透過設計適應深色模式和淺色模式以及增加對比度的顏色，確保你的圖表尊重系統設定。
